import React from 'react'

/**
 * 可复用的歌单展示组件
 * 
 * @param {Object} props - 组件属性
 * @param {Object} props.playlist - 歌单数据对象
 * @param {string} [props.mode='grid'] - 展示模式: 'grid' (网格卡片), 'list' (列表项), 'detail' (详情)
 * @param {Array} [props.actions=[]] - 操作按钮配置
 * @param {Function} [props.onClick] - 点击歌单时的回调函数
 * @param {string} [props.className=''] - 额外的CSS类名
 */
function PlaylistItem({ playlist, mode = 'grid', actions = [], onClick, className = '' }) {
  // 处理点击事件
  const handleClick = (e) => {
    if (onClick) {
      onClick(playlist, e)
    }
  }

  // 根据模式渲染不同样式的歌单
  switch (mode) {
    case 'list':
      return renderListItem()
    case 'detail':
      return renderDetailItem()
    case 'grid':
    default:
      return renderGridItem()
  }

  // 渲染网格卡片样式
  function renderGridItem() {
    return (
      <div 
        className={`playlist-card ${className}`}
        onClick={handleClick}
      >
        <img 
          src={playlist.coverImageUrl || `https://via.placeholder.com/300?text=${encodeURIComponent(playlist.name)}`} 
          alt={playlist.name} 
          className="playlist-card-cover"
        />
        <h3 className="playlist-card-title">{playlist.name}</h3>
        <p className="playlist-card-desc">
          {playlist.description || `包含 ${playlist.songCount || '多'} 首歌曲`}
        </p>
        {actions.length > 0 && (
          <div className="playlist-card-actions">
            {renderActionButtons()}
          </div>
        )}
      </div>
    )
  }

  // 渲染列表项样式
  function renderListItem() {
    return (
      <div className={`playlist-item ${className}`}>
        <div className="playlist-item-icon" onClick={handleClick}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 9V15M18 12H9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="playlist-item-info" onClick={handleClick}>
          <h4 className="playlist-item-name">{playlist.name}</h4>
          <p className="playlist-item-count">{playlist.songCount} 首歌曲</p>
        </div>
        {actions.length > 0 && (
          <div className="playlist-item-actions">
            {renderActionButtons()}
          </div>
        )}
      </div>
    )
  }

  // 渲染详情样式
  function renderDetailItem() {
    return (
      <div className={`playlist-detail ${className}`}>
        <img 
          src={playlist.coverImageUrl || `https://via.placeholder.com/400?text=${encodeURIComponent(playlist.name)}`} 
          alt={playlist.name} 
          className="playlist-detail-cover"
        />
        <div className="playlist-detail-info">
          <h2 className="playlist-detail-name">{playlist.name}</h2>
          <p className="playlist-detail-description">{playlist.description || '暂无描述'}</p>
          <p className="playlist-detail-count">{playlist.songCount || 0} 首歌曲</p>
          {playlist.isOfficial && <span className="playlist-detail-official">官方推荐</span>}
        </div>
        {actions.length > 0 && (
          <div className="playlist-detail-actions">
            {renderActionButtons()}
          </div>
        )}
      </div>
    )
  }

  // 渲染操作按钮
  function renderActionButtons() {
    return actions.map((action, index) => (
      <button
        key={index}
        className={`btn ${action.className || ''}`}
        onClick={(e) => {
          e.stopPropagation()
          if (action.onClick) {
            action.onClick(playlist)
          }
        }}
        title={action.title}
      >
        {action.icon ? (
          <span className="action-icon">{action.icon}</span>
        ) : (
          action.label
        )}
      </button>
    ))
  }
}

export default PlaylistItem